<script setup lang="ts">
import {computed} from "vue";
import {useSystemDictStore} from "@/store/system/systemDictStore";
import _ from "lodash";
import NODATA from "@/assets/post/noData.png";
import {PagePath} from "@/util/commonUtil";

const props = defineProps({
  fansList: {
    type: Array<any>,
    default: () => []
  },
  isEnd:{
    type: Boolean,
    default: () => false
  },
  currentPage: {
    type: Number,
    default: () => 1
  }
});
const userLevelImagesDictList: any = computed(() => useSystemDictStore().UserLevelImages)

function getLvImage(level: any) {
  if (_.isEmpty(userLevelImagesDictList.value)) {
    return;
  }
  if (!_.isUndefined(userLevelImagesDictList.value[level - 1].dictValue)){
    return userLevelImagesDictList.value[level - 1].dictValue;
  }else {
    return null
  }
}

const emit = defineEmits(['loadMoreCurrentPage']);
function loadMore(){
  // 页数回调
  return emit('loadMoreCurrentPage', props.currentPage  + 1);
}
</script>

<template>
  <section class="fansList">
    <template v-for="item in fansList">
      <div class="fansCard inline-flex min-w-[280px] relative overflow-hidden rounded">
        <ul class="list-inline relative ml-0 list-none pl-0 m-0" v-if="item.user">
          <li class="list-none align-middle inline-block pl-1.5 pr-1.5">
            <a href="#">
              <span class="relative inline-block w-[38px] h-[38px]">
                <img :src="item.user.photoUrl" :alt="item.user.nickName" class="w-full h-full inline-block"
                     style="border-radius: 50%">
              </span>
            </a>
          </li>
          <li class="list-none align-middle inline-block pl-1.5 pr-1.5">
            <dl class="m-0 p-0">
              <dt class="m-0 p-0 font-bold leading-[1.5] flex items-center">
                <div class="flex items-center flex-[1] overflow-hidden">
                  <a :href="PagePath.UserCenterPath+'?userUid='+item.user.uid" class="line-clamp-1" target="_blank">
                    {{ item.user.nickName }}
                  </a>
                  <img class="inline-flex h-4 ml-1 w-auto" src="@/assets/vip/vip.svg" alt="vipBadge"
                       v-if="item.user.userTag > 0" title="会员">
                  <img class="inline-flex h-4 ml-1 w-auto" :src="getLvImage(item.user.userLevel)" alt="userLevelImage">
                </div>
              </dt>
              <dd class="mt-1.5 line-clamp-1" v-if="item.user.summary">{{ item.user.summary }}</dd>
              <dd class="mt-1.5 line-clamp-1" v-else>这家伙很懒，什么都没有写...</dd>
            </dl>
          </li>
        </ul>
      </div>
    </template>
    <div class="PostCardEnd flex justify-center items-center mt-4">
      <div class="lookMore text-slate-400 cursor-pointer hover:text-orange-500" v-if="!isEnd"  @click="loadMore">加载更多</div>
      <div class="noMore text-slate-400 cursor-pointer" v-if="isEnd && !_.isEmpty(fansList)">我也是有底线的~</div>
      <a-empty v-if="isEnd && _.isEmpty(fansList)"
               class="flex flex-col justify-center items-center"
               :image="NODATA"
               :image-style="{height: '280px'}">
        <template #description>
          <span class="text-slate-400">嘿！这里没有数据，就像沙漠里没水一样。</span>
        </template>
      </a-empty>
    </div>
  </section>
</template>

<style scoped lang="less">
.fansCard {
  width: calc(33.332% - 10px);
  background: rgba(0, 0, 0, 0.03);
  text-align: left;
  padding: 10px 0 10px 15px;
  margin: 5px;
  vertical-align: top;
}

.fansCard .list-inline > li + li {
  width: calc(100% - 58px);
}
</style>
